<template>
    <div>
        <div class="comment-review">
            <div class="header">
                <div class="header-left">
                    活动评价总计 (共10人评价)
                </div>
                
                
            </div>
            <div class="review-score">
                <flexbox>
                    <flexbox-item>
                        <div class="progress__inner-bar" :style="{width:  '70%'}">
                            
                        </div>
                        <span class="progress__inner-text">专业水平: 2.5</span>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="progress__inner-bar" :style="{width:  '50%'}">
                            
                        </div>
                        <span class="progress__inner-text">活动氛围: 2.5</span>
                    </flexbox-item>
                    <flexbox-item>
                        <div class="progress__inner-bar" :style="{width:  '50%'}">
                            
                        </div>
                        <span class="progress__inner-text">活动环境: 2.5</span>
                    </flexbox-item>

                </flexbox>

            </div>
        </div>
    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: 'CommentBottom',
    components: {
        Flexbox,
        FlexboxItem
    }
    
}
</script>

<style lang="stylus" scoped>
.review-score >>> .vux-flexbox-item
    height: .5rem
    background-color: #ffd8d4
    position: relative
.comment-review
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .25rem
        border-bottom: 1px solid #ddd
        box-sizing:border-box
        // box-shadow: 0 -1px 1px 1px #ddd
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: red
                margin-right: .1rem
                margin-top: .25rem
        .header-right
            min-width: 1.04rem
            float: right
            text-align: center
            font-size: .1rem
            color: #ccc
    .review-score
        padding: .2rem .1rem
        box-sizing: border-box
        background-color: #fff
        .progress__inner-bar
            background-color: #ff9892
            height: 100%
        .progress__inner-text
            position: absolute 
            top: 0
            left: 0
            right: 0
            bottom: 0
            padding: .1rem
            color: #fff
            background-color: rgba(0,0,0,0)

</style>
